<!--
 * @Author: your name
 * @Date: 2020-11-02 15:49:07
 * @LastEditTime: 2020-11-03 16:29:32
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\components\purchaseLens\ChooseLenses.vue
-->
<template>
    <ul class="ChooseLenses">
        <template v-if="configLenses.length">
            <li
                class="ChooseLenses_li plr20"
                v-for="(item, index) of configLenses"
                :key="'item' + index"
                ref="li"
                :class="{active: currentIndex === index}"
                @click.stop="changeLenses(item, index)">
                <h3 class="title ptb20" :class="{isActive: currentIndex === index}">{{$t(item.title)}}</h3>
                <div class="img-box">
                    <img class="img" ref="img" :src="item.img" :alt="item.title">
                </div>
                <ul class="con ptb20 plr10" v-if="item.config && item.config.length">
                    <li class="con_li ptb10" v-for="(config, i) of item.config" :key="'config' + i">
                        <div class="con_li_title mb10">
                            <input class="radioCheck mr10" v-model="isChecked" :value="index + '' + i" type="radio" ref="input" @change.stop="getVal($event, config, index)">
                            <span class="price" :class="{isActive: Checked === index + '' + i}">{{$t('$')}}{{config.price}}</span>
                            <span class="recom" v-show="config.isRecommend === '1'">Recommend</span>
                        </div>
                        <p class="con_li_txt" :class="{isActive: Checked === index + '' + i}">{{config.txt}}</p>
                    </li>
                </ul>   
            </li>
        </template>
        <template v-else>
            <li class="nothing">{{$t('No related configuration')}}</li>
        </template>
    </ul>
</template>

<script>
export default {
    props: {
        configLenses: {
            type: [Array, Object],
            default: () => []
        }
    },
    data() {
        return {
            isChecked: '00',
            currentIndex: 0,
            Checked: '00'
        }
    },
    methods: {
        getVal(e, ele, index) {
            this.Checked = this.isChecked;
            if (e.target.checked) {
                this.$refs.img[index].src = ele.img;
                this.$emit('getPrice', ele);
            }
        },
        changeLenses(item, index) {
            const ChooseLensesLi = document.querySelectorAll('.ChooseLenses_li');
            const radioList = ChooseLensesLi[index].querySelectorAll('.radioCheck');
            let data = item.config;
            let isDefault = true;
            let value = '';
            // 进行当前眼镜配置进行遍历， 如果存在选择默认值，就按存在选择默认值，否则按照第一个为选择默认值
            for (let i = 0; i < data.length; i++) {
                if (data[i].isChecked === '1') {
                    value = radioList[i].getAttribute('value');
                    this.$refs.img[index].src = item.config[i].img;
                    isDefault = false;
                    break;
                }
            }
            if (isDefault) {
                value = radioList[0].getAttribute('value');
                this.$refs.img[index].src = item.config[0].img;
            }
            this.isChecked = value;
            this.Checked = value;
            this.currentIndex = index;
        }
    }
}
</script>

<style lang="scss" scoped>
@import "~/assets/scss/index.scss";
.ChooseLenses {
    @include flex-center(space-between);
    &_li {
        width: 284px;
        border: 2px solid $ddd;
        box-sizing: border-box;
    }
    .nothing {
        width: $s100;
        text-align: center;
    }
    .title {
        position: relative;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        color: $c999;
    }
    .img-box {
        width: 100%;
        padding-top: 47%;
        position: relative;
        .img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
    }
    .con {
        @include flex(column);
        .radioCheck {
            width: 18px;
            height: 18px;
            color: $theme1;
            background: $theme1;
        }
        .con_li_title {
            @include flex();
            position: relative;
            align-items: center;
            color: $c999;
            .price {
                font-size: 16px;
                font-weight: bold;
            }
            .recom {
                position: absolute;
                right: 0;
                top: 0;
                color: #dba42f;
                font-size: 14px;
            }
        }   
        .con_li_txt {
            @include multiline-ellipsis(2);
            font-size: 13px;
            color: $c999;
            font-weight: bold;
            line-height: 1.5;
        }
    }
}
.active {
    border: 2px solid $theme1 !important;
}
.isActive {
    color: $c000 !important;
}
</style>